<template>
  <div class="box" ref="boxRef">
  </div>
  <ul ref="ulRef">
    <li>香蕉</li>
    <li>草莓</li>
    <li>葡萄</li>
    <li>橘子</li>
    <li>芒果</li>
  </ul>
</template>
<!-- 
  vue3中获取DOM元素方法如下
  1.通过ref方法绑定DOM
  1)在元素中定义一个ref属性，并且赋值xx
  2)在ts代码中声明一个ref变量，该变量和DOM元素的ref属性名称保持一致(绑定上了)
  注意点：1）DOM元素的ref属性的值和定义的ref变量一样
         2）DOM的访问必须要在onMounted钩子函数中访问，切记不要在之前的生命周期钩子函数中访问
 -->
<script lang='ts' setup>
import {ref,onMounted} from 'vue'
const boxRef=ref<null|HTMLElement>(null)
const ulRef=ref<null|HTMLElement>(null)
onMounted(()=>{
   if(boxRef.value){
      boxRef.value.style.backgroundColor="#ff0000"
   }
   console.log(ulRef.value?.children[1].innerHTML);
   
})


</script>

<style lang='scss' scoped>
.box{
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  border-radius: 50%;
}
</style>